/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 构建优化，摇树
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
  ],
  prefix: 'tw-', // 自动添加类名前缀
  // important: true,
  corePlugins: {
    preflight: false,
  },
  extend: {
    textUnderlineOffset: {
      3: '3px',
    },
  },
  theme: {
    screens: {
      'sm': '577px',
      'md': '769px',
      'lg': '993px',
      'xl': '1201px',
      'xxl': '1601px',
      'xs': {
        'max': '576px',
      },
      'max-md': {
        'max': '768px',
      },
      'max-lg': {
        'max': '992px',
      },
      'with-max-sm': {
        'min': '576px',
        'max': '768px',
      },
      'with-max-md': {
        'min': '768px',
        'max': '992px',
      },
      'with-max-lg': {
        'min': '992px',
        'max': '1200px',
      },
      'with-max-xl': {
        'min': '1200px',
        'max': '1600px',
      },
    },
    extend: {
      dropShadow: {
        lg: ['0 1px 2px rgba(0,0,0,.06)', '0 1px 10px rgba(0,0,0,.08)'],
        xl: ['0 1px 2px rgba(0,0,0,.06)', '0 1px 20px rgba(0,0,0,.08)'],
      },
      borderRadius: {
        '50%': '50%',
      },
      fontSize: {
        'xs': ['12px', '18px'],
        '26': ['26px', '34px'],
        '32': ['32px', '48px'],
      },
      colors: {
        // 背景色：tw-bg-***, 字体色： tw-text-***
        'sp-black-color-1': '#171717',
        'sp-black-color-2': '#424242',
        'sp-black-color-3': '#616161',
        'sp-black-color-4': '#9E9E9E',
        'sp-black-color-5': '#E0E0E0',
        'sp-grey-color-1': '#F3F4F6;',
        'sp-grey-color-2': '#F8F8F8;',
        'sp-grey-color-3': '#EDEDED',
        'sp-primary-color-1': '#00755F;',
        'sp-primary-color-2': '#078971;',
        'sp-primary-color-3': '#00614F;',
        'sp-primary-color-4': '#edf4f2;',
        'sp-warning-color': '#FF4D4F',
        'sp-tips-color': '#FAAD14',
      },
    },
  },
};
